<script setup name="formFileReport">
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';

	import api from '@/api/api';
	import util from '@/utils/util';

	// Vue3.4 版本之后，我们将使用 defineModel 替代子组件中的 props 和 emit。
	// 组件中可以支持定义多个 defineModel，可以满足绑定多个双向绑定的属性
	const modelValue = defineModel();
	const scrollbarRef = ref(null);
	let intervalId = null;
	// 自动滚动逻辑
	function startAutoScroll() {
		const scrollWrap = scrollbarRef.value.wrapRef;
		if (!scrollWrap) return;
		intervalId = setInterval(() => {
			if (scrollWrap.scrollTop + scrollWrap.clientHeight >= scrollWrap.scrollHeight - 1) {
				// 如果接近底部，则重置滚动位置
				scrollWrap.scrollTop = 0;
			} else {
				// 否则继续向下滚动
				scrollWrap.scrollTop += 1;
			}
		}, 30); // 每隔30毫秒滚动一次
	};

	// 在组件挂载后开始自动滚动
	onMounted(() => {
		setTimeout(() => {
			// startAutoScroll();
		}, 1000)
	});

	// 在组件卸载前清除定时器
	onUnmounted(() => {
		clearInterval(intervalId);
	});

	// 回调
	const emit = defineEmits(["change", ""]);
</script>

<template>
	<el-scrollbar ref="scrollbarRef">
		<div style="padding: 10px 0;">
			<template v-for="(item,index) in 20" :key="index">
				<div class="table-li2">
					<p class="back_number"><span>{{index<9 ? `0${index+1}` : index+1}}</span>TH</p>
					<p class="name">NaOH溶液浓度的标定及食醋中总酸度的测定</p>
					<!-- <p class="b"></p> -->
					<img :src="util.getImageUrl('j.png')" class="shengjiang" v-if="index%2" />
					<img :src="util.getImageUrl('s.png')" class="shengjiang" v-else />
					<p class="samll">有机化学实验室（一）</p>
					<p class="back_ranking">{{90 - index*5}}
						<span class="back_j"></span>
					</p>
				</div>
			</template>
		</div>
	</el-scrollbar>
</template>

<style lang="scss" scoped>
	.el-scrollbar {
		box-sizing: border-box;
		height: 100% !important;
	}

	.table-li2 {
		padding: 5px 10px;
		display: flex;
		// gap: 10px;
		align-items: center;
		justify-content: space-between;

		.back_number {
			width: 75px;
			height: 47px;
			line-height: 47px;
			background-image: url(../../../assets/img/u224.svg);
			background-size: 100% 100%;
			overflow: hidden;

			span {
				font-size: 36px;
				font-weight: bold;
			}
		}

		.name {
			margin-left: 10px;
			flex: 1;
			text-align: center;
			min-width: 170px;
			// margin: 0 10px;
		}

		.b {
			height: 20px;
			border-right: 1px solid #eee;
			margin-left: 4px;
			margin-right: 10px;
		}

		.shengjiang {
			margin: 0 10px;
			width: 30px;
		}

		.samll {
			flex: 1;
			text-align: center;
			font-size: 12px;
		}

		.back_ranking {
			width: 61px;
			height: 50px;
			line-height: 50px;
			background-image: url(../../../assets/img/u261.svg);
			background-size: 100% 100%;
			// 245 253
			overflow: hidden;
			position: relative;
			font-size: 38px;
			text-align: center;
			font-weight: bold;

			.back_j {
				position: absolute;
				z-index: 2;
				left: -3px;
				top: 21px;
				// transform: translateY(-50%);
				width: 15px;
				height: 10px;
				transform: rotate(90deg);
				background-image: url(../../../assets/img/u227.svg);
				background-size: 100% 100%;
			}
		}

		&:nth-child(1) {
			.back_ranking {
				background-image: url(../../../assets/img/u226.svg);
			}
		}

		&:nth-child(2) {
			.back_ranking {
				background-image: url(../../../assets/img/u245.svg);
			}
		}

		&:nth-child(3) {
			.back_ranking {
				background-image: url(../../../assets/img/u253.svg);
			}
		}
	}
</style>